{extend name="layout" /}

{block name="title"}
<title>列表字段 - thinkPHP极速后台开发</title>
<meta name="title" content="列表字段 - thinkPHP极速后台开发">
<meta name="keywords" content="列表字段,php,后台开发包，thinkphp、easyadmin、admin,easy,thinkeasyadmin">
<meta name="description" content="列表字段,快速配置列表的字段,样式;easyadmin灵活可定制的thinkphp的后台开发工具包,助你快速开发后台">
{/block}

{block name="main"}


<ul class="right-menu">
    <li><a href="#use" class="active">用法</a></li>
    <li><a href="#text">文本字段</a></li>
    <li><a href="#datetime">日期时间字段</a></li>
    <li><a href="#image">图片字段</a></li>
    <li><a href="#select">选择字段</a></li>
    <li><a href="#switch">开关字段</a></li>
    <li><a href="{:url('custom_field')}">自定义字段</a></li>
</ul>


<fieldset id="join" class="layui-elem-field">
    <legend>列表字段</legend>
    <div class="layui-field-box">


        <p>列表默认预定义了几个字段,可直接使用; 如果需要不能满足需求,可<a href="{:url('custom_field')}">自定义字段类</a>,也很简单;</p>


        <fieldset class="layui-elem-field layui-field-title" id="use">
            <legend>字段的用法</legend>
            <div class="layui-field-box">
                <p>配置列表字段,展示到表格(table)的每一行的每一列(td)中; 不同类型的值,需要配置不同的字段;</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\columns\lists\ListText;
use easyadmin\app\columns\lists\ListSwitch;
use easyadmin\app\columns\lists\ListSelect;
use easyadmin\app\columns\lists\ListImage;
use easyadmin\app\columns\lists\ListDateTime;
use easyadmin\app\libs\ListField;

class Category extends \easyadmin\controller\Admin
{
    protected function configListField(ListField $list)
    {
        $list
            //文本字段
            ->addField('field', '字段名称', ListText::class,[
                //options 选项
            ])

            //开关字段
            ->addField('field', '字段名称', ListSwitch::class,[[
                //options 选项
            ])

            //下来选择字段
            ->addField('field', '字段名称', ListSelect::class,[[
                //options 选项
            ])

            //图片字段
            ->addField('field', '字段名称', ListImage::class,[[
                //options 选项
            ])

            //日期时间字段
            ->addField('field', '字段名称', ListDateTime::class,[[
                //options 选项
            ]);
    }

}
        </pre>

                <ol>
                    <li>1. 不同的字段,只是在 options 选项上的不同;</li>
                    <li>2. <code>configListField</code>方法表示配置列表;详见<a href="{:url('lists')}">列表页面配置</a></li>
                </ol>

                <fieldset class="layui-elem-field layui-field-title">
                    <legend>addField 方法 参数说明:</legend>
                    <div class="layui-field-box">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>字段</th>
                                <th>说明</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>默认值</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>field</td>
                                <td>字段名称;数据库表的字段,例如:<code>name</code>; 如果是<a href="{:url('lists_join')}#join">多表关联查询</a>
                                    ,需要写上关联表的别名,例如:<code>user.name</code> ;
                                </td>
                                <td>string</td>
                                <td>是</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>label</td>
                                <td>字段标题,显示名称</td>
                                <td>string</td>
                                <td>是</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>fieldClass</td>
                                <td>渲染字段的类名; 例如是使用 ListText 类渲染本字段,则填写 ListText::class
                                </td>
                                <td>string</td>
                                <td>是</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>options</td>
                                <td>字段的选项; 不同的字段类有不同的选项;</td>
                                <td>array</td>
                                <td>否</td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>

            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="text">
            <legend>文本字段 ListText</legend>
            <div class="layui-field-box">
                <p>展示为一行文本</p>
                <p><code>文本字段的options 适用于所有其他字段</code></p>
                <div><code>options</code> 选项说明</div>
                <table class="layui-table">
                    {include file="index/form_field_text" /}
                </table>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\columns\lists\ListText;
use easyadmin\app\libs\ListField;

class Category extends \easyadmin\controller\Admin
{

    protected function configListField(ListField $list)
    {
        $list
            //文本字段
            ->addField('field', '字段名称', ListText::class,[
                //options 选项
                'class'=>'test_class_name',
                'attr'=>'disabled=disabled checked=checked data-id=345',
                'default'=>'顶级分类',
                'template'=>'test:test' //需要放在当前的模块的 views 目录中
            ])
    }

}
        </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="datetime">
            <legend>日期时间字段 ListDateTime</legend>
            <div class="layui-field-box">
                <p>展示为时间格式的文本</p>

                <div><code>options</code> 选项说明</div>
                <table class="layui-table">
                    {include file="index/form_field_text" /}
                </table>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\columns\lists\ListDateTime;
use easyadmin\app\libs\ListField;

class Category extends \easyadmin\controller\Admin
{

    protected function configListField(ListField $list)
    {
        $list
            //日期时间字段
            ->addField('field', '字段名称', ListDateTime::class,[
                //options 选项 , text 文本字段 的属性也都是可用的

                // 用 date 函数格式化,  传入格式化参数, 这是默认的
                'format'=>'Y-m-d H:i:s',

                //自定义函数处理
                'format' => function ($val) {
                    return date('Y/m/d H:i:s', $val);
                },

                //关闭格式化 (默认)
                'format' => null,

            ])
    }

}
        </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="image">
            <legend>图片字段 ListImage</legend>
            <div class="layui-field-box">
                <p>展示为一张图片,点击可放大</p>

                <div><code>options</code> 选项说明</div>
                <table class="layui-table">
                    {include file="index/form_field_text" /}
                </table>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\columns\lists\ListImage;
use easyadmin\app\libs\ListField;

class Category extends \easyadmin\controller\Admin
{

    protected function configListField(ListField $list)
    {
        $list
            //图片字段
            ->addField('field', '字段名称', ListImage::class,[ ])
    }

}
        </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="select">
            <legend>选择字段 ListSelect</legend>
            <div class="layui-field-box">
                <p>从定义好的一个数组中,选择一个值进行展示; 常用于状态展示; 例如: 是否开启 ; 是否删除 等 多个状态 </p>

                <div><code>options</code> 选项说明</div>
                <table class="layui-table">
                    {include file="index/form_field_text" /}
                    <tr>
                        <td>options</td>
                        <td>array</td>
                        <td>一个数组,显示的时候从数组中选取一条显示</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;options.key</td>
                        <td>void</td>
                        <td>数据库中的值, 用这个值匹配上了 就显示这条数据的 text</td>
                        <td>是</td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;options.text</td>
                        <td>void</td>
                        <td>用 key 匹配上以后;显示的值</td>
                        <td>是</td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;options.color</td>
                        <td>string</td>
                        <td>一个合法的颜色值</td>
                        <td>否</td>
                    </tr>
                </table>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\columns\lists\ListImage;
use easyadmin\app\libs\ListField;

class Category extends \easyadmin\controller\Admin
{

    protected function configListField(ListField $list)
    {
        $list
            //选择字段
             ->addField('name', '分类名称', ListSelect::class,[
                'options'=>[
                    ['key' => 'php', 'text' => '后端语言', 'color' => '#5FB878'],
                    ['key' => 'javascript', 'text' => '前端语言', 'color' => 'cyan'],
                ]
            ])
    }

}
        </pre>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title" id="switch">
            <legend>开关字段 ListSwitch</legend>
            <div class="layui-field-box">
                <p>一个 switch 开关 , 可直接 ajax 控制状态</p>

                <div><code>options</code> 选项说明</div>
                <table class="layui-table">
                    {include file="index/form_field_text" /}
                    <tr>
                        <td>template</td>
                        <td>string</td>
                        <td>自定义模板路径; 放在当前模块的 views 目录中 ; 详见<a href="{:url('template_extend')}">自定义模板</a></td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>success</td>
                        <td>string|int</td>
                        <td>正确,开启的值 默认 1</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>error</td>
                        <td>string|int</td>
                        <td>错误,关闭的值 默认 0</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>text</td>
                        <td>string</td>
                        <td>开关文字 , 竖线分隔, 前面是开的显示文本,后面是关的显示文本 默认 YES|NO</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>url</td>
                        <td>string</td>
                        <td>请求URL , 会使用 thinkphp6 的 url() 函数 生成url 默认 enable</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>params</td>
                        <td>array</td>
                        <td>请求参数的额外参数. 默认 []</td>
                        <td>否</td>
                    </tr>
                </table>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\columns\lists\ListSwitch;
use easyadmin\app\libs\ListField;

class Category extends \easyadmin\controller\Admin
{

    protected function configListField(ListField $list)
    {
        $list
            //选择字段
             ->addField('name', '分类名称', ListSwitch::class,[
                'success' => 1, //正确,开启的值  默认 1
                'error' => 0, //错误,关闭的值  默认 0
                'text' => 'YES|NO',//开关文字 , 竖线分隔, 前面是开的显示文本,后面是关的显示文本  默认   YES|NO
                'url' => 'enable',//请求URL , 会使用 thinkphp6 的 url() 函数 生成url  默认 enable
                'params' => ['test'=>1],//请求参数的额外参数.  默认  []
            ])
    }

}
        </pre>
            </div>
        </fieldset>
    </div>
</fieldset>


{/block}
